import React from 'react';
import { Layout, Menu } from 'antd';
import { 
  DashboardOutlined,
  SettingOutlined,
  UserOutlined,
  BarChartOutlined
} from '@ant-design/icons';

const { Sider } = Layout;

// 菜单配置数据
const menuConfig = {
  dashboard: [
    { key: 'overview', icon: <DashboardOutlined />, label: '概览' },
    { key: 'analytics', icon: <BarChartOutlined />, label: '分析' }
  ],
  system: [
    {
      key: 'userManagement',
      icon: <UserOutlined />,
      label: '用户管理',
      children: [
        { key: 'userList', label: '用户列表' },
        { key: 'roleList', label: '角色管理' },
        { key: 'permissionList', label: '权限管理' }
      ]
    },
    {
      key: 'systemSetting',
      icon: <SettingOutlined />,
      label: '系统设置',
      children: [
        { key: 'basicSetting', label: '基本设置' },
        { key: 'logSetting', label: '日志管理' }
      ]
    }
  ],
  business: [
    { key: 'product', label: '产品管理' },
    { key: 'order', label: '订单管理' }
  ],
  reports: [
    { key: 'salesReport', label: '销售报表' },
    { key: 'userReport', label: '用户报表' }
  ]
};

const Sidebar = ({ selectedMenu, collapsed }) => {
  const menuItems = menuConfig[selectedMenu] || [];

  return (
    <Sider 
      trigger={null} 
      collapsible 
      collapsed={collapsed}
      width={256}
    >
      <Menu
        theme="dark"
        mode="inline"
        items={menuItems}
        style={{ height: '100%', borderRight: 0 }}
      />
    </Sider>
  );
};

export default Sidebar;